<template>
	<view class="pageWrapper">
		<view class="logos flex-column flex-all-center">
			<image class="pageLogo" src="https://xgd.izaodao.com/public_html/Public/yn/mine/setting/logo.png" mode=""></image>
			<text class="version">版本号:1.0.0</text>
		</view>
		<view @click="goPage(item)" v-for="item of funcList" :key="item.id" class="funcLine">
			<view class="funcLabel">
				{{ item.label }}
			</view>
			<image class="arrowIcon" src="https://xgd.izaodao.com/public_html/Public/yn/mine/index/arrow.png" mode=""></image>
		</view>
		<!-- <view class="funcLine">
			<view class="funcLabel">
				{{ '缓存' }}
			</view>
			<view class="cache">
				330M
			</view>
		</view> -->
		
		<view @click="showDialog" class="logoutBtn flex flex-all-center">
			退出登录
		</view>
		
		<!-- 弹窗 -->
		<u-popup class="dialogWrapper" :show="dialogStatus" @close="close" mode="center">
			<view class="tipText">
				是否确认退出?
			</view>
			<view class="btnArea">
				<view class="cancelBtn flex flex-all-center" @click="dialogStatus = false">
					暂不退出
				</view>
				<view class="confirmBtn flex flex-all-center" @click="logOut">
					退出登录
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/api/login.js'
	export default {
		data () {
			return {
				dialogStatus: false,
				funcList: [{
					id: 1,
					label: '用户协议',
					path: '/pages/mine/useragreement'
				},{
					id: 2,
					label: '隐私协议',
					path: '/pages/mine/privacyagreement'
				}]
			}
		},
		methods: {
			goPage(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			showDialog () {
				this.dialogStatus = true
			},
			open () {
				
			},
			logOut () {
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.logout(token).then(res=>{
					uni.clearStorageSync()
					uni.reLaunch({
						url:"/pages/login/index"
					})
				})
				this.dialogStatus = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 670rpx;
		height: 400rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}
	.pageWrapper {
		padding: 0 40rpx;
		.logos {
			margin: 74rpx auto 32rpx;
			.pageLogo {
				width: 200rpx;
				height: 200rpx;
			}
			.version {
				margin-top: 32rpx;
				color: #282828;
			}
		}
		.funcLine {
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #CCCCCC;
			.arrowIcon {
				width: 40rpx;
				height: 40rpx;
			}
			.cache {
				color: #999999;
			}
		}
		.logoutBtn {
			margin-top: 108rpx;
			background: #03A2EC;
			height: 80rpx;
			border-radius: 40rpx;
			color: #FFF;
		}
		.tipText {
			color: #282828;
		}
		.btnArea {
			display: flex;
			gap: 74rpx;
			margin-top: 80rpx;
			.cancelBtn {
				width: 234rpx;
				height: 80rpx;
				color: #282828;
				font-size: 30rpx;
				border: 1rpx solid #707070;
				border-radius: 40rpx;
			}
			.confirmBtn {
				width: 234rpx;
				height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				background: #03A2EC;
				border-radius: 40rpx;
			}
		}
	}
</style>